<!DOCTYPE html>
<html>
<head>
	<title>Airline Searcher</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
			rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

</head>
<body>
<div class="container">
<h1 style="text-align: center;">Airline Searcher</h1>

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">出发地</label>
    <div class="col-sm-10">
      	<select id="placeA" class="form-control">
      	  <option>北京</option>
	      <option>南京</option>
	      <option>上海</option>
	      <option>广州</option>
	      <option>深圳</option>
	      <option>三亚</option>
	      <option>海口</option>
	      <option>西安</option>
	      <option>杭州</option>
	    </select>
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">目的地</label>
    <div class="col-sm-10">
      <select id="placeB" class="form-control">
	      <option>南京</option>
	      <option>上海</option>
	      <option>广州</option>
	      <option>深圳</option>
	      <option>三亚</option>
	      <option>海口</option>
	      <option>西安</option>
	      <option>杭州</option>
	      <option>北京</option>
	    </select>
    </div>
  </div>
<div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">选择日期</label>
    <div class="col-sm-10">
      	<div class='input-group date' id='datetimepicker1'>
						<input type='text' class="form-control" />
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-calendar"></span>
						</span>
					</div>
    </div>
  </div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-default" onclick="search();">查询</button>
    </div>
  </div>
</form>


<table class="table table-striped">
  <caption>单程结果</caption>
  <thead>
    <tr>
      <th>flightId</th>
      <th>flightNum</th>
      <th>departureTime</th>
      <th>arriveTime</th>
      <th>fromWhere</th>
      <th>toWhere</th>
      <th>fromAirport</th>
      <th>toAirport</th>
      <th>airCompanyId</th>
    </tr>
  </thead>
  <tbody id="result">

  </tbody>
</table>

<table class="table table-striped">
  <caption>联程结果</caption>
  <thead>
    <tr>
      <th>出发地</th>
      <th>出发航班</th>
      <th>出发时间</th>
      <th>中转地</th>
      <th>中转到达时间</th>
      <th>中转出发时间</th>
      <th>中转航班</th>
      <th>目的地</th>
      <th>目的地到达时间</th>
    </tr>
  </thead>
  <tbody id="result2">

  </tbody>
</table>




		
</div>
	
</body>
<!-- 日期选择器 -->
<script type="text/javascript">
			$(function() {
				$('#datetimepicker1').datetimepicker({
					format: 'YYYY-MM-DD',
					locale: moment.locale('zh-cn')
				});
			});
</script>

<script type="text/javascript">
	// 查询函数
	function search(){
		var api = "./search";
		var placeA = $("#placeA option:selected").text();
		var placeB = $("#placeB option:selected").text();
		var payload = "?placeA="+placeA+"&placeB="+placeB;
		console.log(payload);

		$.get(api+payload, function(data,status){
		    	// alert("Data: " + data + "\nStatus: " + status);
		    	var row = data.split(",");
		    	var _html = "";
		    	for (let i = 0; i < row.length; i ++){
		    		_html += "<tr>";
		    		var column = row[i].split("|");
		    		for (let j = 0; j < column.length; j ++){
		    			
		    			if (j == 0){
		    				// 添加链接
		    				_html += "<td><a href='./detail.html?flightId="+column[j]+"'>"+column[j]+"</a></td>";
		    			}else{
		    				_html += "<td>"+column[j]+"</td>";
		    			}
		    		}
		    		_html += "</tr>";
		    	}
		    	console.log(_html);
		    	$("#result").html(_html);
		});

		var api_two = "./getTwoFlight";

		var placeA = $("#placeA option:selected").text();
		var placeB = $("#placeB option:selected").text();
		var payload = "?placeA="+placeA+"&placeB="+placeB;
		console.log(payload);

		$.get(api_two+payload, function(data,status){
			var a = data;
		    var flight = function (flightId,flightNum,departureTime,arriveTime,fromWhere,toWhere,fromAirport,toAirport,airCompanyId){
				this.flightId = flightId;
				this.flightNum = flightNum;
				this.departureTime = departureTime;
				this.arriveTime = arriveTime;
				this.fromWhere = fromWhere;
				this.toWhere = toWhere;
				this.fromAirport = fromAirport;
				this.toAirport = toAirport;
				this.airCompanyId = airCompanyId;
			};
			function time2data(time){
				time = time * 1000;
				var date = new Date(time);  // 参数需要毫秒数，所以这里将秒数乘于 1000
				Y = date.getFullYear() + '-';
				M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				D = date.getDate() + ' ';
				h = date.getHours() + ':';
				m = date.getMinutes() + ':';
				s = date.getSeconds();
				return Y+M+D+h+m+s;
			}
			a = a.split('$');
			//console.log(a);
			var next = a[1];
			var first = a[0];
			first = first.split(',');
			next = next.split(',');
			var _first = [];
			var _next = [];
			for(let i = 0; i < first.length; i ++){
				//console.log(first[i]);
				if (first[i] != ''){
					let tmp = first[i].split('|');
					let tmp_flight = new flight(tmp[0],tmp[1],tmp[2],tmp[3],tmp[4],tmp[5],tmp[6],tmp[7],tmp[8]);
					//console.log(tmp_flight);
					_first.push(tmp_flight);
				}
			}
			for(let i = 0; i < next.length; i ++){
				if (next[i] != ''){
					let tmp = next[i].split('|');
					let tmp_flight = new flight(tmp[0],tmp[1],tmp[2],tmp[3],tmp[4],tmp[5],tmp[6],tmp[7],tmp[8]);
					//console.log(tmp_flight);
					_next.push(tmp_flight);
				}
			}

			var _html = '';
			for (let i = 0; i < _first.length; i ++){
				for (let j = 0; j < _next.length; j ++){
					//console.log(_first[i].fromWhere+'-'+_first[i].toWhere+'-'+_next[j].fromWhere+'-'+_next[j].toWhere);
					// 搜索联程航班

					if (_first[i].toWhere == _next[j].fromWhere && _next[j].departureTime-_first[i].arriveTime > 3600 && _next[j].departureTime-_first[i].arriveTime < 10000){
						console.log(_first[i].fromWhere+'-'+_first[i].toWhere+'-'+_next[j].toWhere+' '+time2data(_first[i].departureTime)+
							' '+time2data(_first[i].arriveTime)+
							' '+time2data(_next[j].departureTime)+
							' '+time2data(_next[j].arriveTime));
						_html += "<tr>";
						_html += "<td>"+_first[i].fromWhere+"</td>";
						_html += "<td><a href='./detail.html?flightId="+_first[i].flightId+"'>"+_first[i].flightNum+"</a></td>";
						_html += "<td>"+time2data(_first[i].departureTime)+"</td>";
						_html += "<td>"+_first[i].toWhere+"</td>";
						_html += "<td>"+time2data(_first[i].arriveTime)+"</td>";
						_html += "<td>"+time2data(_next[j].departureTime)+"</td>";
						_html += "<td><a href='./detail.html?flightId="+_next[j].flightId+"'>"+_next[j].flightNum+"</a></td>";
						_html += "<td>"+_next[j].toWhere+"</td>";
						_html += "<td>"+time2data(_next[j].arriveTime)+"</td>";
						_html += "</tr>";
					}
				}
			}
		    console.log(_html);
		    $("#result2").html(_html);
		});
	}
</script>

<!-- 更改鼠标样式 -->
<script>
document.getElementsByTagName("html")[0].style.cursor = "url('https://blog-static.cnblogs.com/files/Mz1-rc/iicon.ico?t=1643181505'), default";
</script>

</html>


